<template>
<div class="header">
  <div class="header-left">
    <div class="iconfont back-icon">&#xe624;</div>
  </div>
  <div class="header-input">
    <span class="iconfont">&#xe632;</span>
    输入城市/景点/游玩/主题
  </div>
  <router-link to="/city">
    <div class="header-right">{{this.$store.state.city}}
      <span class="iconfont arrow-icon">&#xe64a;</span>
      </div>
  </router-link>
</div>
</template>
<script>
export default {
  name: 'HomeHeader'
}
</script>
<style scoped lang="stylus">
  @import '~styles/varibles.styl'
  .header
    color :white
    font-size :0.16rem
    display :flex
    line-height:$headerHeight
    background:$bgColor
    .header-left
     float:left
     width: 0.64rem;
     .back-iocn
       padding-left :0.1rem
       text-align:center
       font-size :0.4rem
   .header-input
     flex :1;
     margin-top :0.12rem
     margin-left :0.2rem
     padding-left :0.2rem
     height :0.64rem
     line-height:0.64rem
     background-color :#fff
     border-radius :0.1rem
     color :#ccc
   .header-right
     font-size: .30rem
     min-width :1.04rem
     padding:.1rem .1rem .2rem .1rem
     color:#fff
     text-align :center
     .arrow-icon
      font-size:0.24rem
      margin-left :-0.04rem
</style>
